<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="gsw945" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>Phaser Demo With Parcel</title>
    <link rel="stylesheet" href="styles.css" />
    <style type="text/css">
        body,
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }
        #game {
            border: 1px solid #fa1;
        }
    </style>
</head>
<body>
    <!-- <h1>Hello, World!</h1> -->
    <div class="page-body">
        <div id="game"></div>
    </div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var config = {
            type: Phaser.AUTO,
            parent: 'game',
            width: 800,
            height: 600,
            backgroundColor: '#2d2d88',
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
                render: render
            }
        };

        var pos;
        var tint;
        var frame;
        var transformMatrix;

        var game = new Phaser.Game(config);

        function preload ()
        {
            this.load.image('pic', 'assets/making-your-first-phaser-3-game/star.png');
        }

        function create ()
        {
            frame = this.textures.getFrame('pic');

            tint = Phaser.Renderer.WebGL.Utils.getTintAppendFloatAlpha(16777215, 1);

            transformMatrix = new Phaser.GameObjects.Components.TransformMatrix();

            pos = new Phaser.Math.Vector2(0, 0);

            this.tweens.add({
                targets: pos,
                props: {
                    x: {
                        value: 32,
                        ease: 'Linear',
                        duration: 6000
                    },
                    y: {
                        value: 472,
                        ease: 'Sine.inOut',
                        duration: 3000
                    }
                },
                yoyo: true,
                repeat: -1
            });
        }

        function update ()
        {
            var pipeline = this.renderer.pipelines.MULTI_PIPELINE;

            for (var i = 0; i < 12; i++)
            {
                pipeline.batchTextureFrame(
                    frame,
                    i * 64, pos.y - (Math.sin(pos.x + i) * 16),
                    tint, 1,
                    transformMatrix
                );
            }
        }

        function render () {
            //
        }
    </script>
</body>
</html>